<template>
  <div>
    上传封面
    <el-upload
      class="upload-demo"
      drag
      action="http://localhost:8080/file/upload"
      :headers="token"
      :on-success="handleCoverUpload"
      multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="标题" prop="articleTitle">
        <el-input v-model="form.articleTitle" type="textarea" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item label="内容">
        <editor v-model="form.articleContent" :min-height="192"/>
      </el-form-item>
      <!--<el-form-item label="作者" prop="articleAuthor">-->
      <!--  <el-input v-model="form.articleAuthor" type="textarea" placeholder="请输入内容" />-->
      <!--</el-form-item>-->
      <!--<el-form-item label="观看数" prop="articleWatchCount">-->
      <!--  <el-input v-model="form.articleWatchCount" placeholder="请输入观看数" />-->
      <!--</el-form-item>-->
      <!--<el-form-item label="评论数" prop="articleCommentsCount">-->
      <!--  <el-input v-model="form.articleCommentsCount" placeholder="请输入评论数" />-->
      <!--</el-form-item>-->
      <!--<el-form-item label="点赞数" prop="articleThuCount">-->
      <!--  <el-input v-model="form.articleThuCount" placeholder="请输入点赞数" />-->
      <!--</el-form-item>-->
      <el-form-item label="专栏封面" prop="articleCover">
        <el-input v-model="form.articleCover" placeholder="请输入专栏封面" />
      </el-form-item>
      <el-form-item label="日期" prop="articleDate">
        <el-date-picker clearable
                        v-model="form.articleDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择日期">
        </el-date-picker>
      </el-form-item>
      <!--<el-form-item label="文章作者id" prop="articleAuthorid">-->
      <!--  <el-input v-model="form.articleAuthorid" placeholder="请输入文章作者id" />-->
      <!--</el-form-item>-->
    </el-form>
    <el-button type="primary" @click="submission">投 稿</el-button>
  </div>
</template>

<script>
import { addArticle } from '@/api/article'
import Editor from '@/components/Editor/index.vue'

export default {
  components: { Editor },
  data () {
    return {
      token: {
        Authorization: localStorage.getItem('token')
      },
      form: {
        articleWatchCount: 0,
        articleCommentsCount: 0,
        articleThuCount: 0,
        articleAuthor: JSON.parse(localStorage.getItem('user')).userName,
        articleDate: new Date(),
        articleCover: '',
        articleAuthorid: JSON.parse(localStorage.getItem('user')).userId
      }
    }
  },
  methods: {
    async submission () {
      await addArticle(this.form)
    },
    handleCoverUpload (res) {
      this.form.articleCover = res.data.url
    }
  }
}
</script>

<style scoped lang="less">

</style>
